<template>
  <a-table :columns="columns" :data-source="page.list">
    <template #opr="{ record }">
      <a-button @click="editquestion(record)">编辑题目</a-button>
      <a-divider type="vertical" />
      <a-button @click="setoptions(record)">选项设置</a-button>
    </template>
  </a-table>

  <!-- 修改信息窗口 -->
  <a-modal v-model:visible="visible2" title="题目编辑" @ok="execChange">
    <a-form
      :model="changeObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="需求内容">
        <a-input v-model:value="changeObj.question_content" />
      </a-form-item>

      <a-form-item label="需求类型">
        <a-radio-group v-model:value="changeObj.mode">
          <a-radio value="选择题">选择题</a-radio>
          <a-radio value="填空题">填空题</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>

  <!-- 设置选项窗口 -->
  <a-modal v-model:visible="visible3" title="选项设置" @ok="setChange">
    <div v-for="item in options" :key="item.type">
      <a-form
        :model="options"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 14 }"
      >
        选项{{ item.type }}：<a-form-item>
          <a-input v-model:value="item.content" />
        </a-form-item>
      </a-form>
    </div>
    <a-button type="primary" @click="addItem"> 新增选项 </a-button>
    <a-button type="primary" @click="removeItem" style="margin-left: 50px">
      删除选项
    </a-button>
  </a-modal>
</template>

<script setup>
import { reactive, ref } from "vue";
import { get, del, post, getBlob, tip, removeLocalToken } from "@/common";
import { message } from "ant-design-vue";

const options = ref([]);

//选项表
const optionsType = ref(["A", "B", "C", "D", "E", "F", "G", "H"]);
//个人信息表
const currPage = ref("info");
const columns = [
  {
    dataIndex: "request_id",
    title: "需求ID",
  },
  {
    dataIndex: "question_content",
    title: "需求内容",
  },
  {
    dataIndex: "mode",
    title: "需求类型",
  },
  {
    key: "opr",
    title: "操作",
    slots: {
      customRender: "opr",
    },
  },
];

// const changeObject = reactive({

// })

const addItem = () => {
  if (options.value.length <= 7) {
    var len = options.value.length;
    var typeS = optionsType.value[len];
    options.value.push({
      type: typeS,
      content: "",
    });
  }else{
    message.error("最多8个选项")
  }
};

const removeItem = () => {
  options.value.pop();
};
//分页处理-start
const query = reactive({}); //定义查询参数

const page = ref({}); //接收服务端返回的分页对象

//分页引擎
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
      "共" +
      total +
      "条记录,当前第" +
      pagination.current +
      "页" +
      (range[1] - range[0] + 1) +
      "条记录"
    );
  },
});

//获取当前分页
const getPage = (pageNum = 1) => {
  query.pageNum = pageNum;
  query.pageSize = pagination.pageSize;

  get("/demander/editquestion", query).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;
  });
};
getPage(1); //页面加载是，首先加载第一页

//当分页发送变化时（如：页码、每页记录数变化时）
const handleTableChange = (pagi, filters, sorter, { currentDataSource }) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};
//分页处理-end

//修改信息部分
const visible2 = ref(false);
const changeObj = reactive({
  user_id: "",
  request_id: "",
  question_content: "",
  mode: "",
});

//打开修改信息窗口
const editquestion = (info) => {
  changeObj.request_id = info.request_id;
  changeObj.user_id = info.user_id;
  changeObj.question_content = info.question_content;
  changeObj.mode = info.mode;

  //打开窗口
  visible2.value = true;
};

//修改信息
const execChange = () => {
  //执行修改
  post("/demander/updatequestion", changeObj).then((res) => {
    changeObj.question_content = "";
    changeObj.mode = "";
    visible2.value = false;
    tip.success("编辑题目成功！");
    getPage(page.value.current);
  });
};

//修改选项
const visible3 = ref(false);
const changeObject = reactive({
  request_id: "",
  mode: "",
  option_content: "",
  option_type: "",
});

//打开选项插入窗口
const setoptions = (info) => {
  changeObject.request_id = info.request_id;
  changeObject.mode = info.mode;
  if (changeObject.mode == "选择题") visible3.value = true;
  else {
    visible3.value = false;
    tip.error("填空题无需设置");
  }
};

const posts =()=>{
      post("/demander/setoption", changeObject).then((res) => {
      tip.success("设置选项成功！");
      getPage(page.value.current);
    });
}
//修改信息
const setChange = () => {
  //执行修改

  for (var i = 0; i < options.value.length; i++) {
    changeObject.option_type = options.value[i].type;
    changeObject.option_content = options.value[i].content;
    posts();
    setTimeout(5000);
  }
  visible3.value = false;
  
};


</script>

<style>
</style>
